<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <title>post | conci</title>
    <meta name="description" content="前端填坑路1.外边距合并例子：1.子元素设置margin-top;父元素不设置margin-top;,但父元素会出现上边距，子元素相对父元素却不会出现。 2.同级元素上面那个设置margin-bottom：下面那个设置margin-top:可是中间的间距却不是两个边距的和。原因：这个是css默认行为，因为元素没有找到另一个那个元素的边界，只在垂直方向的外边距合并，合并为边距中最大的那个，水平方向的">
<meta name="keywords" content="css,html,css3">
<meta property="og:type" content="article">
<meta property="og:title" content="css,html填坑路">
<meta property="og:url" content="http://www.ccblog.win/2017/05/05/html,css填坑路/index.html">
<meta property="og:site_name" content="cc">
<meta property="og:description" content="前端填坑路1.外边距合并例子：1.子元素设置margin-top;父元素不设置margin-top;,但父元素会出现上边距，子元素相对父元素却不会出现。 2.同级元素上面那个设置margin-bottom：下面那个设置margin-top:可是中间的间距却不是两个边距的和。原因：这个是css默认行为，因为元素没有找到另一个那个元素的边界，只在垂直方向的外边距合并，合并为边距中最大的那个，水平方向的">
<meta property="og:updated_time" content="2017-06-01T05:20:02.453Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="css,html填坑路">
<meta name="twitter:description" content="前端填坑路1.外边距合并例子：1.子元素设置margin-top;父元素不设置margin-top;,但父元素会出现上边距，子元素相对父元素却不会出现。 2.同级元素上面那个设置margin-bottom：下面那个设置margin-top:可是中间的间距却不是两个边距的和。原因：这个是css默认行为，因为元素没有找到另一个那个元素的边界，只在垂直方向的外边距合并，合并为边距中最大的那个，水平方向的">
    
        <link rel="alternate" href="true" title="cc" type="application/atom+xml">
    
    
        <link rel="icon" href="/favicon.ico">
    
    <link rel="stylesheet" href="/css/concise.css">
    <script src="/js/concise.js"></script>
    <script>
        (function(){
            var useragent=navigator.userAgent;
            console.log(navigator,useragent);
            var isM;
            if(useragent.indexOf('iPhone')!=-1){
                isM=true;
            }else if(useragent.indexOf('Android ')!=-1){
                isM=true;
            }else if(useragent.indexOf('iPad')!=-1){
                isM=true;
            }else{
                isM=false;
            }
            if(isM){
                document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                window.onresize=function(){
                    document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                };
            }
        })();
    </script>
    
        <script type="text/javascript" id="hexo.configuration">
            var CONFIG = {
                root: '/',
                algolia: {
                    applicationID: '148WKKLBJ2',
                    apiKey: '1b27867f0ba7ad358543a84d6d30bcb3',
                    indexName: 'test',
                    hits: {
                        per_page: ''
                    },
                    labels: {
                        input_placeholder: '请输入要搜索的字段...',
                        hits_empty: '没有查找到和 「${query}」相关的内容',
                        hits_stats: '总共${hits} 条相关条目，使用了 ${time} 毫秒'
                    }
                }
            };
        </script>
    
    <script src="http://opu30aljn.bkt.clouddn.com/jquery.js"></script>
    
        <script src="http://opu30aljn.bkt.clouddn.com/instantsearch.js"></script>
        <script src="/js/thirdparty/algolia.js"></script>
    
    <script src="/js/script.js"></script>
</head>
<body>
<input type="checkbox" id="left-information">
<div id="wrapper">
    <div id="bgg"></div>
    <header id="header">
    <nav id="nav" class="clearfix">
        <label for="left-information"></label>
        <ul class='nav-left'>
            <li><a href="/">ccblog</a></li>
        </ul>
        <input type="checkbox" id="header-right-nav">
        <ul class="clearfix nav-right">
            
            <li><a href="/">Home</a></li>
            
            <li><a href="/about">About</a></li>
            
            <li><a href="/contact">Contact</a></li>
            
            <li><a href="/archives">Archives</a></li>
            
            <li><a href="/tags">tags</a></li>
            
        </ul>
        <label for="header-right-nav"><i></i></label>
    </nav>
</header>
    <article id="logo">
    <div id="logo-content">
        <header>
            <a href="">cc&#39;s .blog<b>conci</b></a>
        </header>
        <p>
            conci theme 1.0.0<br>
            Simple and practical hexo personal blog theme.<br>
            The freedom to choose
        </p>
    </div>
</article>
    <div id="main" class="clearfix">
        <section id="main-left" class="left">
            <article id="post">
    <h1>css,html填坑路</h1>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/05/05/html,css填坑路/" class="leancloud_visitors" data-flag-title="css,html填坑路">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        
            <span class="tag">
                  <a class="article-category-link" href="/categories/htmlcss/">htmlcss</a>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="date">2017.05.05</span>
    </p>
    <div id="page-post-content">
        <h3 id="前端填坑路"><a href="#前端填坑路" class="headerlink" title="前端填坑路"></a>前端填坑路</h3><h4 id="1-外边距合并"><a href="#1-外边距合并" class="headerlink" title="1.外边距合并"></a>1.外边距合并</h4><p>例子：<br>1.子元素设置margin-top;父元素不设置margin-top;,但父元素会出现上边距，子元素相对父元素却不会出现。<br> 2.同级元素上面那个设置margin-bottom：下面那个设置margin-top:可是中间的间距却不是两个边距的和。<br>原因：<br>这个是css默认行为，因为元素没有找到另一个那个元素的边界，只在垂直方向的外边距合并，合并为边距中最大的那个，水平方向的不会，目的只是为了文档美观性（如：在文段落中间如果不合并就会出现两倍的边距，看起来不美观。），而且只发生在文档流中的块级元素，如果是行内块，浮动，和定位则不会合并。<br>解决：<br>1.1父元素设置<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">overflow:hidden/auto;</div></pre></td></tr></table></figure></p>
<p>1.2父元素设置<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">border:1px solid <span class="comment">#;</span></div></pre></td></tr></table></figure></p>
<p>1.3用padding代替<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">padding:</div></pre></td></tr></table></figure></p>
<p>1.2兄弟间形成BFC</p>
<h4 id="2-img间隙"><a href="#2-img间隙" class="headerlink" title="2.img间隙"></a>2.img间隙</h4><p>例子：<br>一个div中包含img图像时，图像最下面和div边框会有一些间隙。<br>原因：<br>由于html，css都是外国人发明的，所以默认字体是英文，而英文最好的展现方式是vertical-align:baseline;而img是行内块元素，所以默认垂直对齐方式也为vertical-align:baseline;，所以会出现间隙；<br>解决：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">vertical-align:middle/bottom;</div></pre></td></tr></table></figure></p>
<h4 id="3-行内块水平方向之间的间隔"><a href="#3-行内块水平方向之间的间隔" class="headerlink" title="3.行内块水平方向之间的间隔"></a>3.行内块水平方向之间的间隔</h4><p>列子：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;div style=<span class="string">"display:inline-block"</span>&gt;1&lt;/div&gt;</div><div class="line">&lt;div style=<span class="string">"display:inline-block"</span>&gt;2&lt;/div&gt;</div><div class="line">&lt;div style=<span class="string">"display:inline-block"</span>&gt;3&lt;/div&gt;</div></pre></td></tr></table></figure></p>
<p>原因：<br>行内块也有行内元素的特性，所以浏览器把换行解析为一个空格。<br>解决：<br>1.不换行<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;div style=<span class="string">"display:inline-block"</span>&gt;1&lt;/div&gt;&lt;div style=<span class="string">"display:inline-block"</span>&gt;2&lt;/div&gt;&lt;div style=<span class="string">"display:inline-block"</span>&gt;3&lt;/div&gt;</div></pre></td></tr></table></figure></p>
<p>2.margin设负值，负回去<br>3.把父元素的font-size:设为0;<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;div style=<span class="string">"font-size:0;"</span>&gt;</div><div class="line">	&lt;div style=<span class="string">"display:inline-block"</span>&gt;1&lt;/div&gt;</div><div class="line">	&lt;div style=<span class="string">"display:inline-block"</span>&gt;2&lt;/div&gt;</div><div class="line">	&lt;div style=<span class="string">"display:inline-block"</span>&gt;3&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure></p>
<h4 id="4-p标签不能放块级元素"><a href="#4-p标签不能放块级元素" class="headerlink" title="4.p标签不能放块级元素"></a>4.p标签不能放块级元素</h4><p>列子：<br>记得刚开始敲代码时就把div放进p标签里去了，后来在css中通过p标签找div却找不到，f12后才发现div自动被解析到p外面去了。才知道了p不能放块级元素。<br>解决：<br>不呢个解决，反正就不能放。</p>
<h4 id="5-行内元素设置margin-top-margin-bottom-无效"><a href="#5-行内元素设置margin-top-margin-bottom-无效" class="headerlink" title="5.行内元素设置margin-top;margin-bottom;无效"></a>5.行内元素设置margin-top;margin-bottom;无效</h4><p>就是无效，记住就行。</p>
<h4 id="6-塌陷"><a href="#6-塌陷" class="headerlink" title="6.塌陷"></a>6.塌陷</h4><p>列子：<br>下边列子ul没高度，这就是塌陷了。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">&lt;ul&gt;</div><div class="line">	&lt;li style=<span class="string">"float:left;width:200px,height:200px"</span>&gt;&lt;/li&gt;</div><div class="line">	&lt;li style=<span class="string">"float:left;width:200px,height:200px"</span>&gt;&lt;/li&gt;</div><div class="line">&lt;/ul&gt;</div></pre></td></tr></table></figure></p>
<p>原因：<br>li设为浮动后，脱离文档流，所以这时候ul找不见它的子元素li了，所以没高度了。<br>解决：这个问题太常见了，但ul没设置背景或边框也很容易被忽略。解决方法比较多，下面只列了最常使用的方法，其他方法可查看我另一篇介绍关于塌陷的博文。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">&lt;style&gt;</div><div class="line">ul:after&#123;</div><div class="line">	content:<span class="string">''</span>;</div><div class="line">	display:table;</div><div class="line">	clear:both;</div><div class="line">&#125;</div><div class="line">ul&#123;</div><div class="line">	zoom:1/*为了兼容低版本ie*/</div><div class="line">&#125;</div><div class="line">&lt;/style&gt;</div><div class="line">&lt;ul&gt;</div><div class="line">	&lt;li style=<span class="string">"float:left;width:200px,height:200px"</span>&gt;&lt;/li&gt;</div><div class="line">	&lt;li style=<span class="string">"float:left;width:200px,height:200px"</span>&gt;&lt;/li&gt;</div><div class="line">&lt;/ul&gt;</div></pre></td></tr></table></figure></p>
<h4 id="7-opacity-0-背景内容都会透明"><a href="#7-opacity-0-背景内容都会透明" class="headerlink" title="7.opacity:0;背景内容都会透明"></a>7.opacity:0;背景内容都会透明</h4><p>列子：<br>最常见的就是弹出框，如果父元素背景设置opacity:0;它的所有子元素也会透明。<br>原因：<br>opacity:属性使然。<br>解决：<br>1.背景和子元素分离.<br>2.背景透明使用rgba();</p>
<h4 id="8-父元素设置display-none-，子元素设置position-fixed-也看不到。"><a href="#8-父元素设置display-none-，子元素设置position-fixed-也看不到。" class="headerlink" title="8.父元素设置display:none;，子元素设置position:fixed;也看不到。"></a>8.父元素设置display:none;，子元素设置position:fixed;也看不到。</h4><p>毕竟就算脱离文档，也不会脱离父元素。还是受父元素影响</p>
<h4 id="9-label-for-””放a标签里或外面，for指向单选或多选框，点label却点不到。"><a href="#9-label-for-””放a标签里或外面，for指向单选或多选框，点label却点不到。" class="headerlink" title="9.label for=””放a标签里或外面，for指向单选或多选框，点label却点不到。"></a>9.label for=””放a标签里或外面，for指向单选或多选框，点label却点不到。</h4><p>背景：<br>可能有人会说你为什么会这么做，感觉没必要。<br>其实我当时是想试着用a标签指向不同的id,看可不可以做个选项卡，没想到点不同的a标签确实可以在设置了overflow:hidden;的div框里显示不同的选项，视觉上很像选项卡。最后就剩点不同的a标签，给a标签加个选中状态了，当时想的是用input的伪类:checked来做，于是就出现了上面的坑。<br>原因：<br>不管怎样，点的都是a标签。<br>解决：<br>没办法，最后只能不用a标签指向id来做，都使用了::checked来做。</p>
<h4 id="10-子元素中有设置了position-absolute-的，其他子元素没法到设置了position-absolute-的上面"><a href="#10-子元素中有设置了position-absolute-的，其他子元素没法到设置了position-absolute-的上面" class="headerlink" title="10.子元素中有设置了position:absolute;的，其他子元素没法到设置了position:absolute;的上面"></a>10.子元素中有设置了position:absolute;的，其他子元素没法到设置了position:absolute;的上面</h4><p>本身absolute就会提高层级，而z-index又是针对定位元素的，所以只能把其他元素设为相对定位，然后使用z-index来提高层级。</p>
<h4 id="11-加css3过渡效果，如果是width或height，过渡到的状态不能设为auto"><a href="#11-加css3过渡效果，如果是width或height，过渡到的状态不能设为auto" class="headerlink" title="11.加css3过渡效果，如果是width或height，过渡到的状态不能设为auto"></a>11.加css3过渡效果，如果是width或height，过渡到的状态不能设为auto</h4><p>列子：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">div&#123;</div><div class="line">	width:100px;</div><div class="line">	height:100px;</div><div class="line">	transition-property:height;</div><div class="line">	transition-duration:2s;</div><div class="line">&#125;</div><div class="line">div:hover&#123;</div><div class="line">	height:auto;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>解决：<br>设固定数值的宽高。</p>
<h4 id="12-给a标签加js点击事件，点击无效果（好坑，因为这蓝飞了半个来小时。）"><a href="#12-给a标签加js点击事件，点击无效果（好坑，因为这蓝飞了半个来小时。）" class="headerlink" title="12.给a标签加js点击事件，点击无效果（好坑，因为这蓝飞了半个来小时。）"></a>12.给a标签加js点击事件，点击无效果（好坑，因为这蓝飞了半个来小时。）</h4><p>原因：<br>a标签href为空,为空会重新刷新页面，使得点击无效果。<br>解决：<br>href=”javascript:void(0);”或href=”#”;</p>
<h4 id="持续总结更新中。。。。。。"><a href="#持续总结更新中。。。。。。" class="headerlink" title="持续总结更新中。。。。。。"></a>持续总结更新中。。。。。。</h4><p>以上都是本人在实际操作中遇到的坑，这些坑对于有些人可能不是坑。但对于我来说是，毕竟每个人遇到的坑相对的都不一样。希望这些坑的解决方式方法对你有所帮助。</p>

    </div>
    
        <div id="page-post-tags">
              <a class="article-tag-link" href="/tags/css/">css</a>&nbsp;/&nbsp;<a class="article-tag-link" href="/tags/css3/">css3</a>&nbsp;/&nbsp;<a class="article-tag-link" href="/tags/html/">html</a>
        </div>
    
    
        <div id="page-post-reward">
            <label for="page-post-inp">打赏</label>
            <input type="checkbox" id="page-post-inp">
            <ul class="clearfix">
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://ooa3lxrpg.bkt.clouddn.com/wx.jpg?imageView2/2/w/180">
                    </a>
                    <p>微信</p>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://ooa3lxrpg.bkt.clouddn.com/zfb.jpg?imageView2/2/w/180">
                    </a>
                    <p>支付宝</p>
                </li>
            </ul>
        </div>
    
    
<nav id="article-nav" class="clearfix">
  
    <a href="/2017/04/05/利用css边框做出三角形,梯形/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">上一篇</strong>
      <div class="article-nav-title">
        
          
          利用css边框做出三角形,梯形
        
      </div>
    </a>
  
  
    <a href="/2017/05/31/jquery显示隐藏常用方式性能测试报告/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">下一篇</strong>
      <div class="article-nav-title">
          
          
          jquery显示隐藏常用方式性能测试报告
          
      </div>
    </a>
  
</nav>

</article>


<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"4","bdPos":"left","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>



<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
<script>
    var cloudTieConfig = {
        url: document.location.href,
        sourceId: '',
        productKey: '6f0492a87f74476e9df370e5e7ce2270',
        target: 'cloud-tie-wrapper'
    };
    var yunManualLoad = true;
    Tie.loader('aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vcGMvbGl2ZXNjcmlwdC5odG1s', true);
</script>



        </section>
        <section id="main-right" class="right">
            <div class="my">
    <div class="my-information">
        <div class="my-img">
            <img src="http://ooa3lxrpg.bkt.clouddn.com/b.jpg?imageView2/1/w/120/h/120/q/75" rel="图片">
            <a href="https://github.com/cspp01"></a>
        </div>
        <span>cc</span>
        <p>求知若饥 虚心若愚</p>
    </div>
    <p class="my-social">
        
            <a href="https://github.com/cspp01" class="my-social-me5">github</a>
        
            <a href="/" class="my-social-me2">twitter</a>
        
            <a href="http://weibo.com/5262373626/profile?topnav=1&wvr=6&is_all=1" class="my-social-me2">weibo</a>
        
            <a href="http://douban.com/people/160374034/" class="my-social-me2">豆瓣</a>
        
            <a href="http://www.zhihu.com/people/cc-chen-4-85" class="my-social-me1">知乎</a>
        
    </p>
    <div class="my-post">
        <a href="/archives">
            <strong>19</strong><br>
            <span>posts</span>
        </a>
        <a href="/categories">
            <strong>11</strong><br>
            <span>categories</span>
        </a>
        <a href="/tags">
            <strong>21</strong><br>
            <span>tags</span>
        </a>
    </div>
    <div class="search-rss">
        <div class="my-search">
            <a href="javascript:void(0)" id ='my-search-a' class="popup-trigger">search</a>
        </div>
        
            <div class="my-rss">
                <a href="/atom.xml">rss</a>
            </div>
        
    </div>
    <div class="my-links">
        <ul class="clearfix">
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg.jpg">
                    <p>ccblog</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%282%29.jpg">
                    <p>boc</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>haha</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>pp</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%281%29.jpg">
                    <p>oop</p>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="hot-page">
        
    </div>
</div>
            
            <div id="warehouse"></div>
            
        </section>
    </div>
    <footer id="footer">
    <p>© 2017  cc | <iframe src="https://ghbtns.com/github-btn.html?user=cspp01&repo=cspp01.github.io&type=star&count=true" >
        </iframe><br/>
        concise theme, this world is mine.  | cc'blog | Fork me on Github
        
            | <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261969111'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1261969111%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
        
    </p>
</footer>
</div>
<label for="left-information"></label>


    <div class="site-search">
        <div class="algolia-popup popup">
            <div class="algolia-search">
                <div class="algolia-search-input-icon">
                    <i class="fa fa-search"></i>
                </div>
                <div class="algolia-search-input" id="algolia-search-input"></div>
            </div>

            <div class="algolia-results">
                <div id="algolia-stats"></div>
                <div id="algolia-hits"></div>
                <div id="algolia-pagination" class="algolia-pagination"></div>
            </div>

            <span class="popup-btn-close">
          <i class="fa fa-times-circle"></i>
        </span>
        </div>
    </div>


<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("rRxCAb8Kk2bhhTQJInFKaY4v-gzGzoHsz", "eEp5YWpvXhpv3Jvheh4bHCfG");</script>
<script>
    function showTime(test) {
        var query = new AV.Query(test);
        var entries = [];
        var $visitors = $(".leancloud_visitors");

        $visitors.each(function () {
            entries.push( $(this).attr("id").trim() );
        });

        query.containedIn('url', entries);
        query.find()
            .done(function (results) {
                var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

                if (results.length === 0) {
                    $visitors.find(COUNT_CONTAINER_REF).text(0);
                    return;
                }

                for (var i = 0; i < results.length; i++) {
                    var item = results[i];
                    var url = item.get('url');
                    var time = item.get('time');
                    var element = document.getElementById(url);

                    $(element).find(COUNT_CONTAINER_REF).text(time);
                }
            })
            .fail(function (object, error) {
                console.log("Error: " + error.code + " " + error.message);
            });
    }

    function addCount(test) {
        var $visitors = $(".leancloud_visitors");
        var url = $visitors.attr('id').trim();
        var title = $visitors.attr('data-flag-title').trim();
        var query = new AV.Query(test);

        query.equalTo("url", url);
        query.find({
            success: function(results) {
                if (results.length > 0) {
                    var counter = results[0];
                    counter.fetchWhenSave(true);
                    counter.increment("time");
                    counter.save(null, {
                        success: function(counter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(counter.get('time'));
                        },
                        error: function(counter, error) {
                            console.log('Failed to save Visitor num, with error message: ' + error.message);
                        }
                    });
                } else {
                    var newcounter = new test();
                    /* Set ACL */
                    var acl = new AV.ACL();
                    acl.setPublicReadAccess(true);
                    acl.setPublicWriteAccess(true);
                    newcounter.setACL(acl);
                    /* End Set ACL */
                    newcounter.set("title", title);
                    newcounter.set("url", url);
                    newcounter.set("time", 1);
                    newcounter.save(null, {
                        success: function(newcounter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
                        },
                        error: function(newcounter, error) {
                            console.log('Failed to create');
                        }
                    });
                }
            },
            error: function(error) {
                console.log('Error:' + error.code + " " + error.message);
            }
        });
    }

    $(function() {
        var test = AV.Object.extend("Counter");
        if ($('.leancloud_visitors').length == 1) {
            addCount(test);
        } else if ($('.leancloud_visitors').length > 1) {
            showTime(test);
        }
    });
</script>



<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

</body>

<script src="/js/getTitle.js"></script>
    <script>
        $(function(){
            var __warehouse=document.getElementById('warehouse');
            var __content=document.getElementById('post');
            var cus={
                'title':'none',
                'article':__content,
            };
            __warehouse.__newCc(cus);
        });
    </script>

</html>